{% extends "base.html" %}
{% block title %}首页{% endblock title %}

{% block content %}
    <div class="container py-2">
        <div class="row" data-masonry='{"percentPosition": true}'>
            {% for photo in photos %}
                <div class="col-4 py-2">
                    <div class="card hvr-float-shadow">
                        <!-- 修改了这里 -->
                        <a
                                href="#"
                                data-bs-toggle="modal"
                                data-bs-target="#photo-{{ photo.id }}"
                        >
                            <img
                                    src="{{ photo.image.url }}"
                                    alt=""
                                    class="card-img"
                            >
                        </a>
                        <!-- ******* -->
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="row justify-content-center py-5">
            <span class="step-links paginator">
                {% if photos.has_previous %}
                    <a
                    href="?page=1"
                    class="paginator prevnext" >
                        &laquo;
                    </a>
                    <a
                    href="?page={{ photos.previous_page_number }}"
                    class="paginator prevnext">
                        {{ photos.previous_page_number }}
                    </a>
                {% endif %}

                    <span class="current">
                        {{ photos.number }}
                    </span>

                {% if photos.has_next %}
                    <a
                    href="?page={{ photos.next_page_number }}"
                    class="paginator prevnext">
                        {{ photos.next_page_number }}
                    </a>
                    <a
                    href="?page={{ photos.paginator.num_pages }}"
                    class="paginator prevnext">
                        &raquo;
                    </a>
                {% endif %}
            </span>
        </div>
    </div>
    {% for photo in photos %}
        <!-- Modal -->
        <div class="modal fade" id="photo-{{ photo.id }}">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img
                                src="{{ photo.image.url }}"
                                alt=""
                                class="card-img"
                        >
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    <!-- ************ -->
{% endblock content %}
{% block scripts %}
<style>
    .paginator {
        color: white;
        text-align: center;
        text-decoration: none;
    }
    .prevnext {
        font-size: x-large;
    }
    .current {
        font-size: xx-large;
        padding-left: 10px;
        padding-right: 10px;
    }
</style>
    <!-- 注意相关代码同样添加到 /templates/photo/list.html 中 -->
<script type='text/javascript'>
    $(window).on('load', function() {
        $('#cards').masonry({
        // options
        itemSelector: '.grid-item'
        });
    })
</script>
{% endblock scripts %}